<style lang="scss" scoped>
.Xiaohrader {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100vw;
    align-content: center;

    img {
        margin: 10px;
        width: 60px;
        height: 60px;
        border-radius: 50px;
    }
}

.tabs {
    display: flex;
    text-align: center;
    justify-content: space-around;
    height: 100px;
    align-items: center;

    .tabitem {
        width: 16%;
        height: 60px;
        background-color: #fff;
        border: 1px solid #ececec;

        img {
            width: 70%;
            height: 50px;
        }

    }

    .active {
        border: 1px solid rgb(254, 196, 62);
    }

}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 5px;

    button {
        width: 100%;
        height: 50px;
        background: rgb(254, 196, 62);
        border: none;
        border-radius: 10px;
    }
}

.app {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    .p {
        padding: 20px;
        background-color: #fff;
        text-align: center;
        align-items: center;
        font-size: 20px;
    }
}
</style>
<template>
    <div>
        <div class="Xiaohrader">
            <p><img :src="doctorimage" alt=""></p>
            <p>{{ doctorname }}</p>
            <span>选择一面锦旗,感谢一下医生对您健康帮助吧</span>
        </div>
        <div class="tabs">
            <div class="tabitem" v-for="(v, i) in listTap" :key="i" :class="{ active: currentIndex === i }"
                @click="Headers(v.bannerstate, i)">
                <p><img :src="v.bannerimage"></p>
            </div>
        </div>
        <div class="taplist">
            <div class="taplistimg" style="text-align: center;">
                <img style="width:300px;height:300px" :src="listTap[currentIndex]?.bannerimage" alt="">
                <p style="font-weight: 600;font-size: 16px;padding: 10px;">{{ listTap[currentIndex]?.bannerstate }}<span
                        style="color: rgb(248, 86, 54);">￥{{
                            listTap[currentIndex]?.bannerprice }}</span></p>
            </div>
        </div>
        <div class="footer">
            <button @click="onok()">立即送出</button>
        </div>
        <van-overlay :show="show" @click="show = false">
            <div class="app">
                <div class="p">
                    <p>支付中...</p>
                </div>
            </div>
        </van-overlay>
    </div>
</template>
<script lang="ts" setup>
import { useRoute } from 'vue-router';
const route = useRoute()
import axios from 'axios';
import { ref, watch } from 'vue';
interface listTap {
    bannerimage: string,
    bannerprice: number,
    bannerstate: string
}
const show = ref(false)
const currentIndex = ref(0);
const doctorname = ref(localStorage.getItem('doctorname') || '')
const doctorimage = ref(localStorage.getItem('doctorimage') || '')

const Headers = (v: string, i: number) => {
    currentIndex.value = i;
    TapText.value = v

}
const listTap = ref<listTap[]>([])
const TapText = ref('')
const TapText1 = ref('')

watch(TapText, (newVal) => {
    TapText1.value = newVal

})

axios.get('/api/review/banner').then(res => {
    listTap.value = res.data.data
})

const listId = ref(route.query.id as string | undefined);
const now = new Date();

// 点击按钮 新增评论 调用节口
const onok = () => {
    axios.post('/api/review/banview', {
        name: '花湖', image: listTap.value[currentIndex.value].bannerimage, state: TapText.value, timer: now.toLocaleString(),
        doctorid: listId.value
    }).then(res => {
        show.value = true
        axios.get('/api/pay', { params: { id: listId.value, price: '15', title: '微信支付', body: '图文问诊' } }).then(res => {
            setTimeout(() => {
                show.value = false
                window.location.href = res.data.result
            }, 3000)
        })
    })

}

</script>
